<template>
	<view class="body">
		<image src="./rank-bg.png" class="body-bg" mode="widthFix"></image>
		<view class="top">
			<view class="top-two" >
				<image src="./rank-two.png" mode="widthFix" class="top-image"></image>
				<image :src="list[1].user.avatar" class="top-two-img" v-if="list[1] && list[1].user"></image>
				<view class="top-msg" v-if="list[1] && list[1].user">
					<view class="top-msg-num">
						<view class="top-msg-num-add">{{list[1].addNum}}</view>
						<view class="top-msg-num-num">次</view>
					</view>
					<view class="top-msg-name">{{list[1].user.nickname}}</view>
					<view class="top-msg-time">{{list[1].createTime | timeStr}}</view>
				</view>
			</view>
			<view class="top-one" >
				<image src="./rank-one.png" mode="widthFix" class="top-image"></image>
				<image :src="list[0].user.avatar" class="top-two-img" v-if="list[0] && list[0].user"></image>
				<view class="top-msg"  style="bottom: 100rpx;" v-if="list[0] && list[0].user">
					<view class="top-msg-num">
						<view class="top-msg-num-add">{{list[0].addNum}}</view>
						<view class="top-msg-num-num">次</view>
					</view>
					<view class="top-msg-name">{{list[0].user.nickname}}</view>
					<view class="top-msg-time">{{list[0].createTime | timeStr}}</view>
				</view>
			</view>
			<view class="top-three">
				<image src="./rank-three.png" mode="widthFix" class="top-image"></image>
				<image :src="list[2].user.avatar" class="top-two-img"  v-if="list[2] && list[2].user"></image>
				<view class="top-msg"  style="bottom: 30rpx;"  v-if="list[2] && list[2].user">
					<view class="top-msg-num">
						<view class="top-msg-num-add">{{list[2].addNum}}</view>
						<view class="top-msg-num-num">次</view>
					</view>
					<view class="top-msg-name">{{list[2].user.nickname}}</view>
					<view class="top-msg-time">{{list[2].createTime | timeStr}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<image src="./rank-biao.png" class="list-image"></image>
			<image src="./rank-bottom.png" class="list-bottom" mode="widthFix"></image>
			<view class="list-view">
				<view class="list-title">
					<view class="list-title-one">排名</view>
					<view class="list-title-two">号码/时间</view>
					<view class="list-title-three">捐赠数量</view>
				</view>
				<view class="list-body">
					<view class="list-item"  v-for="(item,index) in list" :key="index" v-if="index>2">
						<view class="list-item2">
							<view class="list-item2-one">{{index + 1}}</view>
							<view class="list-item2-two" v-if="item.user">
								<image :src="item.user.avatar" class="list-item2-two-img"></image>
								<view>
									<view class="list-item2-two-name">{{item.user.nickname}}</view>
									<view class="list-item2-two-time">{{item.createTime}}</view>
								</view>
							</view>
							<view class="list-item2-three">{{item.addNum}}</view>
						</view>
						<view class="list-item-bottom"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rankIngList
	} from "@/api/store";
	import {
		mapGetters
	} from "vuex";
	
	export default {
		components: {
		},
		filters: {
			timeStr(val='') {
				return val.substring(0,10)
			},
		},
		data() {
			return {
				list: []
			};
		},
		onLoad(options) {
			this.getDetail(options)
		},
		mounted() {
			
		},
		methods: {
			getDetail(options) {
				rankIngList({
					storeId: options.id,
				}).then(res => {
					console.log(res)
					this.list = res.data || []
				})
			},
			
		},
		onReachBottom() {
		}
	};
</script>

<style scoped lang="scss" >
	.top-msg-name{
		margin-top: 43rpx;
		font-size: 24rpx;
		color: #FFE9C9;
		text-align: center;
	}
	.top-msg-time{
		text-align: center;
		font-size: 22rpx;
		margin-top: 6rpx;
		color: #FFE9C9;
	}
	.top-msg{
		position: absolute;
		z-index: 10;
		bottom: 50rpx;
		left: 50%;
		transform: translate(-50%,0);
	}
	.top-msg-num{
		display: flex;
		width: 150rpx;
		padding-bottom: 2rpx;
		border-bottom: 1px solid #FFE9C9;
		align-items: baseline;
		justify-content: center;
	}
	.top-msg-num-add{
		font-size: 48rpx;
		color: #FFE9C9;
		font-style: italic;
		text-shadow: 2rpx 2rpx 0px rgba(211,23,8,0.26);
	}
	.top-msg-num-num{
		font-size: 24rpx;
		color: #FFE9C9;
		padding-left: 5rpx;
	}
	.top-two-img{
		width: 165rpx;
		height: 165rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		z-index: 8;
		transform: translate(-50%,0);
	}
	.list-body{
		height: 700rpx;
		overflow: auto;
	}
	.list-item-bottom{
		width: 646rpx;
		height: 1rpx;
		margin: 0 auto;
		background: linear-gradient( 243deg, rgba(255,217,73,0) 0%, #FFF1DB 47%, rgba(255,217,73,0) 100%);
	}
	.list-item2-one {
		font-size: 28rpx;
		color: #FFF3DF;
		margin-left: 10rpx;
	}
	.list-item2-two-img{
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		margin-right: 14rpx;
		flex-shrink: 0;
		margin-top: 13rpx;
	}
	.list-item2-two-time{
		font-size: 26rpx;
		color: #FFF3DF;
	}
	.list-item2-two-name{
		font-size: 30rpx;
		font-weight: bold;
		color: #FFF3DF;
		margin-bottom: 10rpx;
	}
	.list-item2-two{
		display: flex;
		flex: 1;
		margin-left: 95rpx;
		justify-content: start;
	}
	.list-item2-three{
		font-size: 40rpx;
		color: #FFF3DF;
		padding-right: 33rpx;
	}
	.list-item2{
		display: flex;
		height: 150rpx;
		width: 692rpx;
		justify-content: space-between;
		margin: 0 auto;
		padding: 0 30rpx;
		align-items: center;
	}
	.list-view{
		position: relative;
		z-index: 2;
		padding-top: 10rpx;
	}
	.list-title{
		display: flex;
		height: 100rpx;
		width: 692rpx;
		justify-content: space-between;
		margin: 0 auto;
		padding: 0 30rpx;
		align-items: center;
	}
	.list-title-one{
		margin-left: rpx;
		font-size: 26rpx;
		color: #830101;
	}
	.list-title-two{
		margin-left: 169rpx;
		font-size: 26rpx;
		color: #830101;
	}
	.list-title-three{
		margin-left: 190rpx;
		font-size: 26rpx;
		color: #830101;
	}
	.list{
		margin-top: 34rpx;
		padding: 0 10rpx;
		position: relative;
		height: 893rpx;
	}
	.list-bottom{
		position: absolute;
		bottom: -180rpx;
		left: 0;
		z-index: 1;
		width: 747rpx;
		
	}
	.list-image{
		position: absolute;
		top: 0%;
		left: 10rpx;
		z-index: 1;
		width: 732rpx;
		height: 893rpx;
	}
	.top{
		padding-top: 155rpx;
		display: flex;
		justify-content: center;
	}
	.top-image{
		width: 234rpx;
		position: relative;
		z-index: 9;
	}
	.top-one{
		position: relative;
		z-index: 10;
		
	}
	.top-two{
		position: relative;
		margin-top: 50rpx;
		z-index: 10;
	}
	.top-three{
		position: relative;
		margin-top: 70rpx;
		z-index: 10;
	}
	.body{
		width: 100vw;
		min-height: 100vh;
		padding-bottom: 200rpx;
	}
	.body-bg{
		width: 100vw;
		position: fixed;
		z-index: 0;
		top: 0%;
		left: 0;
	}
</style>
